<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 1px solid #999;
        }
        td{
            width: 150px;
            height: 30px;
        }
    </style>
</head>
<body>
    <button type="button" onclick="add_line1()">添加一行</button>
    <button type="button" onclick="remove_line()">删除末尾</button>
    <div id="outer">
        <table>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <script>
        function add_line1() {
            //获取tbody对象
            let tbody = document.querySelector("#outer>table>tbody");

            //获取tbody中原来的东西
            let old = tbody.innerHTML;
            
            let str = "<tr><td></td><td></td></tr>";

            old += str;

            tbody.innerHTML = old;
        }
        function add_line() {
            //获取tbody对象
            let tbody = document.querySelector("#outer>table>tbody");
            //<table>
            //    <tbody>
            //        <tr>
            //            <td></td>
            //        </tr>
            //    </tbody>
            //</table>
            //<tbody></tbody>往往被省略 
            //nodeName打印节点名称
            //console .log(tbody.nodeName);//打印节点的名称
            
            //创建tr元素, document.createElement() 用于创建一个指定的 HTML 元素
            let tr = document.createElement("tr");

            for(let i = 0;i < 2;i++) {
                let td = document.createElement("td");
                //将td对象绑定到tr标签
                //append - 文本/dom元素
                //详细解释https://blog.csdn.net/knight_zhou/article/details/119379487
                //详细解释https://blog.csdn.net/b0303/article/details/119893916
                //appendChild - dom元素, 此方法向节点添加一个最后的子节点
                tr.appendChild(td);
            }
            //tr绑定到tbody
            tbody.appendChild(tr);
        }
        function remove_line() {
            //获取tbody对象
            let tbody = document.querySelector("#outer>table>tbody");

            //获取tbody的最后一个元素
            let last = tbody.lastElementChild;
            //直接删除
            tbody.removeChild(last);
        }
    </script>
</body>
</html>